import React, { Component } from "react";
import { Card } from "antd";
import * as echarts from "echarts";
class analysisOfUserBehaviors extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  options = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "客户端解析TOP10",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        name: "数量",
        type: "value",
        boundaryGap: [0, 0.01],
      },
      axisTick: {
        alignWithLabel: true,
      },
      yAxis: {
        name: "域名",
        type: "category",
        data: [
          "192.168.12.13",
          "192.168.12.54",
          "192.168.12.32",
          "192.168.12.47",
          "192.168.12.11",
          "192.168.12.89",
          "192.168.12.52",
          "192.168.12.33",
          "192.168.12.78",
          "192.168.12.94",
        ],
      },
      series: [
        {
          name: "超大解析包流量",
          type: "bar",
          barWidth: 30,
          stack: "total",

          emphasis: {
            focus: "series",
          },
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 40000],
          color: "red",
        },
        {
          name: "正常解析包流量",
          type: "bar",
          barWidth: 30,
          stack: "total",

          emphasis: {
            focus: "series",
          },
          data: [
            10000, 18203, 20000, 23489, 29034, 30000, 40000, 50000, 60000,
            70000, 80000,
          ],
          color: "#48D1CC",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options1 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "域名解析TOP10",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        name: "数量",
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        name: "域名",
        type: "category",
        data: [
          "baidu.com",
          "163.com",
          "weibo.com",
          "zfb.com",
          "huiji.com",
          "8181.com",
          "lol.com",
          "dnf.com",
          "bilibili.com",
          "weibo.com",
        ],
      },
      series: [
        {
          name: "超大解析包流量",
          type: "bar",
          barWidth: 30,
          stack: "total",

          emphasis: {
            focus: "series",
          },
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 40000],
          color: "red",
        },
        {
          name: "正常解析包流量",
          type: "bar",
          barWidth: 30,
          stack: "total",

          emphasis: {
            focus: "series",
          },
          data: [
            10000, 18203, 20000, 23489, 29034, 30000, 40000, 50000, 60000,
            70000, 80000,
          ],
          color: "#48D1CC",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options2 = () => {
    var chartDom = document.getElementsByClassName("main")[2];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "域名查询类型分布",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          name: "月",
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          name: "数量",
          type: "value",
        },
      ],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
          color: "#f8b142",
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
          color: "#ef33a2",
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
          color: "#699df8",
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
          color: "#7aefc8",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options3 = () => {
    var chartDom = document.getElementsByClassName("main")[3];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "返回代码查询",
      },
      axisTick: {
        alignWithLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          name: "月",
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [{ name: "数值", type: "value" }],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
          color: "#9dd3e8",
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
          color: "#f49494",
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
          color: "#fcd98b",
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
          color: "#b2dc9f",
        },
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [400, 380, 550, 420, 330, 550, 660],
          color: "#889bd8",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  componentDidMount() {
    this.options();
    this.options1();
    this.options2();
    this.options3();
  }
  render() {
    return (
      <div>
        <Card className="main" style={{ width: 1200, height: 500 }}></Card>
        <Card className="main" style={{ width: 1200, height: 500 }}></Card>
        <Card className="main" style={{ width: 1200, height: 500 }}></Card>
        <Card className="main" style={{ width: 1200, height: 500 }}></Card>
      </div>
    );
  }
}

export default analysisOfUserBehaviors;
